<template>
	<view class="bg">
		<!-- 顶部导航部分 -->
		<view class="top">
				<view class="title_header">
					<view class="jiantou" @click="fanhui"></view>
					<text>卡券管理</text>
				</view>
		</view>
		
		<!-- 新增优惠卷 -->
		<view class="youhiujuan" @click="add">
			<image src="/static/加号@2x.png"></image>
			<view>新增优惠劵</view>
		</view>
		
		<!-- 卡片内容 -->
		<view class="nr">
			<uni-card>
				<view :class="{'rectanglel':l,'rectangler':r}">
					<text class="one" @click="jxz">进行中</text>
					<text class="two" @click="yjs">已结束</text>
				</view>
				
				<view class="content" v-if="l == true">
					<view v-for="(item,index) in ldata" :key="index">
						<!-- 进行中的优惠卷 -->
						<view class="content-text1" >
							<!-- 左边部分 -->
							<view class="left">
								<view class="discount">满{{item.sjyhTriggerMoney}}元可用</view>
								<view class="money">
									<view class="fuhao">￥</view>
									<view class="number">{{item.sjyhPreferentialMoney}}</view>
								</view>
							</view>
							
							<!-- 右边部分 -->
							<view class="right">
								<view class="discountname">{{item.sjyhName}}</view>
								<view>有效期:{{item.sjyhExpirationStart}}-{{item.sjyhExpirationEnd}}</view>
							</view>
						</view>
					</view>
					<view v-for="(item,index) in lzkdata" :key="index">
						<!-- 进行中的优惠卷 -->
						<view class="content-text1" >
							<!-- 左边部分 -->
							<view class="left">
		
								<view class="money">
						
									<view class="zk">{{item.sjyhDiscount * 10}}折</view>
								</view>
							</view>
							
							<!-- 右边部分 -->
							<view class="right">
								<view class="discountname">{{item.sjyhName}}</view>
								<view>有效期:{{item.sjyhExpirationStart}}-{{item.sjyhExpirationEnd}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="content" v-if="r == true">
					<view v-for="(item,index) in rdata" :key="index">
						<view class="content-text2" >
							<!-- 左边部分 -->
							<view class="left2">
								<view class="discount2">满{{item.sjyhTriggerMoney}}元可用</view>
								<view class="money2">
									<view class="fuhao2">￥</view>
									<view class="number2">{{item.sjyhPreferentialMoney}}</view>
								</view>
							</view>
							
							<!-- 右边部分 -->
							<view class="right2">
								<view class="discountname2">{{item.sjyhName}}</view>
								<view>有效期:{{item.sjyhExpirationStart}}-{{item.sjyhExpirationEnd}}</view>
							
								<!-- 已结束的标志 -->
								<view class="over2" >
									<image src="/static/已结束.png"></image>
								</view>
							</view>
						</view>
						
					</view>
					<view v-for="(item,index) in rzkdata" :key="index">
						<view class="content-text2" >
							<!-- 左边部分 -->
							<view class="left2">
									
								<view class="money2">
													
									<view class="zk">{{item.sjyhDiscount * 10}}折</view>
								</view>
							</view>
							
							<!-- 右边部分 -->
							<view class="right2">
								<view class="discountname2">{{item.sjyhName}}</view>
								<view>有效期:{{item.sjyhExpirationStart}}-{{item.sjyhExpirationEnd}}</view>
							
								<!-- 已结束的标志 -->
								<view class="over2" >
									<image src="/static/已结束.png"></image>
								</view>
							</view>
						</view>
						
					</view>
					
				</view>
				
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				l: true ,
				r: false ,
				ldata:[],
				rdata:[],
				lzkdata:[],
				rzkdata:[]
			}
		},
		onLoad() {
			this.getList();
		},
		onShow() {

		},
		methods: {
			fanhui(){
				uni.navigateTo({
					url:"/pages/home/home"
				})
			},
			getList(){
				console.log(this.$global.shopId)
				var that = this;
				uni.request({
					url:"http://localhost:8080/shop/youhuiquanList",
					data:{
						shopId:that.$global.shopId
					},
					success(res) {
						console.log(res)
						for (var i = 0; i < res.data.rows.length; i++) {
							if(res.data.rows[i].sjyhStatus == 1){
								if(res.data.rows[i].sjyhType == "折扣"){
									that.lzkdata.push(res.data.rows[i])
								}else if (res.data.rows[i].sjyhType == "满减"){
									that.ldata.push(res.data.rows[i])
								}
	
							}else if(res.data.rows[i].sjyhStatus == 0){
								if(res.data.rows[i].sjyhType == "折扣"){
									that.rzkdata.push(res.data.rows[i])
								}else if (res.data.rows[i].sjyhType == "满减"){
									that.rdata.push(res.data.rows[i])
								}
								
							}
						}
						console.log(that.ldata)
						console.log(that.rdata)
					}
				})
			},
			jxz(){
				this.l = true
				this.r = false
			},
			yjs(){
				this.l = false
				this.r = true
			},
			add(){
				uni.navigateTo({
					url:"/pages/offering_coupons/offering_coupons"
				})
			}
		}
	}
</script>

<style>
	.bg{
		position: relative;
		background-color: #3785f6;
		width: 750rpx;
		height: 450rpx;
	}
/* 导航栏样式 */
	.top{
		width: 750rpx;
	}
	.title_header{
		display: flex;
		padding-top: 60rpx;
	}
	.title_header>text{
		font-size: 35rpx;
		color: white;
		margin-left: 270rpx;
	}
	.jiantou{
		border-bottom: 6rpx solid white;
		border-left: 6rpx solid white;
		width: 20rpx;
		height: 20rpx;
		margin-left: 20rpx;
		transform: rotate(45deg);
	}
	
	/* 新增优惠卷样式 */
	.youhiujuan{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 70rpx;
		margin-top: 50rpx;
		background-color: white;
		position: absolute;
		border-radius: 40rpx;
		width: 600rpx;
		height: 80rpx;
		color: #3785f6;
	}
	
	.youhiujuan image{
		width: 30rpx;
		height: 30rpx;
		padding-right: 15rpx;
	}
	.nr{
		margin-top: 150rpx;
	}
	
	uni-card {
		position: absolute;
		margin-top: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/* 进行中已结束样式 */
	.rectanglel {
	  margin-top: 15rpx;
	  margin-left: 160rpx;
	  width: 300rpx;
	  height: 70rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border: 1rpx #FFFFFF;
	  border-radius: 30px;
	  background: linear-gradient(to right, #2f81fa 50%, #f2f2f2 50%);
	  
	}
	
	.rectangler {
	  margin-top: 15rpx;
	  margin-left: 160rpx;
	  width: 300rpx;
	  height: 70rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border: 1rpx #FFFFFF;
	  border-radius: 30px;
	  background: linear-gradient(to left, #2f81fa 50%, #f2f2f2 50%);
	}
	
	.rectanglel .one{
		color: #ffffff;
		margin-right: 55rpx;
	}
	.rectanglel .two{
		color: #4d90fa;
	}
	
	.rectangler .one{
		color: #4d90fa;
		margin-right: 55rpx;
	}
	.rectangler .two{
		color: #ffffff;
	}
	
	/* 展示内容(优惠卷)样式 */
	.content {
		width: 610rpx;
		margin-top: 30rpx;
		
	}
	
	.content-text1{
		display: flex;
		margin-bottom: 40rpx;
		height: 200rpx;
		
	}
	.content-text1 .left{
		width: 190rpx;
		border: 1rpx #FFFFFF;
		border-radius: 7px 0 0 7px;
		background-image: linear-gradient(to bottom,#ff9272,#ff783a);
		color: white;
		padding-top: 30rpx;
		padding-left: 20rpx;
		padding-bottom: 55rpx;
	}
	.left .discount{
		font-size: 29rpx;
		text-align: center;
	}
	.left .money{
		margin-left: 20rpx;
		margin-top: 40rpx;
		display: flex;
	}
	.money .number{
		font-size: 78rpx;
	}
	/* 右边样式 */
	.content-text1 .right{
		width: 410rpx;
		background-color: #fff3eb;
		padding-top: 33rpx;
		padding-left: 17rpx;
		border: 1rpx #FFFFFF;
		border-radius: 0 7px 7px 0;
	}
	.right .discountname{
		font-weight: bold;
		color: black;
		padding-bottom: 8rpx;
	}
	.right .limitone{
		margin-top: 30rpx;
	}
	
	.content-text2{
		display: flex;
		margin-bottom: 40rpx;
		height: 200rpx;
		
	}
	.content-text2 .left2{
		width: 190rpx;
		border: 1rpx #FFFFFF;
		border-radius: 7px 0 0 7px;
		background-image: linear-gradient(to bottom,#ffbb99,#ffbb99);
		color: white;
		padding-top: 30rpx;
		padding-left: 20rpx;
		padding-bottom: 55rpx;
	}
	.left2 .discount2{
		font-size: 29rpx;
		text-align: center;
	}
	.left2 .money2{
		margin-left: 20rpx;
		margin-top: 40rpx;
		display: flex;
	}
	.money2 .number2{
		font-size: 78rpx;
	}
	/* 右边样式 */
	.content-text2 .right2{
		position: relative;
		width: 410rpx;
		background-color: #f2f2f2;
		padding-top: 33rpx;
		padding-left: 17rpx;
		border: 1rpx #FFFFFF;
		border-radius: 0 7px 7px 0;
	}
	.right2 .discountname2{
		font-weight: bold;
		color: #b8b8b8;
		padding-bottom: 8rpx;
	}
	.right2 .limitone2{
		margin-top: 30rpx;
	}
	
	.over2{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	.over2 image{
		position: absolute;
		top: 125rpx;
		right:15rpx;
		width: 120rpx;
		height: 70rpx;
	}
	
	.zk{
		font-size: 2em
	}
	
	
	
	
	
	
	
</style>
